<!--
 * @Description: 表单设计
 * @Author: wangwangwang
 * @Date: 2020-07-09 19:35:19
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-06-25 10:46:04
--> 
<template>
  <section style="height:100%;">
    <el-row :gutter='8' class="from-config">
      <el-col :span='4' style="height:100%;">
        <div class="control-lib">
          <div class="control-title">
            <el-row type="flex" align="middle" justify="space-between">
              <el-col :span="8" :push="2">控件库</el-col>
            </el-row>
          </div>
          <div class="control-type-container">
            <div class="lib-type-list">
              <div class="list-tile">标准控件库</div>
              <div v-for="(item, index) in commonControlData" :key="item.id" :index='index' draggable="true" class="control-type-list">{{item.name}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span='16'>
        <div class="table-container">
          <div class="table-title">
            <el-row type="flex" align="middle" justify="space-between">
              <el-col :span="20">
                <span>自定义展示<el-input-number v-model="defaultColNum" style="margin:0 10px;" controls-position="right" :min="2" :max="50" @change="handleChange"></el-input-number> </span>
                <span style="color:#4B4C4D;">列（最多展示50列，最少2列）</span>
              </el-col>
              <el-col :span="4" style="text-align:right;">
                <el-button class="bottom_all" type="primary" @click="previewSubmit()">预览</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="table-main">
            <div class="table-backgroud">
              <el-row v-for="item in rowData" :key="item.id" class="backgroud-list">
                <el-col v-for="list in defaultColNum" :key="list" class="backgroud-col" :style="{width:`${100/defaultColNum}%`}"></el-col>
              </el-row>
            </div>
            <div class="table-list-container">
              <div v-for="(item,index) in rowData" :key="item.id" :class="[(moveRow===index&&(!moveCol2&&moveCol2!==0))?'hover-row':'', 'table-list']" :style="{height:`${item.height*41}px`}" :rowIndex='index'>
                <div v-for="(list,index2) in item.children" :key="list.id" class="col-list" :rowIndex='index' :colIndex='index2' :style="[{width:`${(list.width)/defaultColNum*100}%`},{height:`${list.height*41}px`}]">
                  <template v-for="(list2,index3) in list.children">
                    <div v-if='list2.type' :key="list2.id" :rowIndex='index' :colIndex='index2' :colIndex2="index3" :code="list2.code" draggable="true" :class="['table-col-list',(activeRow===index&&activeColIndex===index2&&activeCol===index3)?'is-active':'']" :style="[{width:`${((list2.titleWidth*1)+(list2.contentWidth*1))/list.width*100}%`},{height:`${list2.rowHeight*41}px`}]" @click="setActive(index, index2, index3, list2)">
                      <div v-show="list2.titleWidth" class="list-title" :style="[{width:`${list2.titleWidth*1/((list2.titleWidth*1)+(list2.contentWidth*1))*100}%`},{height:`${list2.rowHeight*41}px`}]">{{list2.title}}</div>
                      <div class="list-content" :style="[{width:`${list2.contentWidth*1/((list2.titleWidth*1)+(list2.contentWidth*1))*100}%`},{height:`${list2.rowHeight*39}px`}]">{{list2.name}}</div>
                      <i v-if="list2.type!==10" class="el-icon-error" @click="deleteList($event,index,index2, index3)"></i>
                    </div>
                    <div v-if='!list2.type' :key="list2.id" :class="['table-col-list',(moveCol===index2&&moveCol2===index3&&moveRow===index)?'hover-col':'']" :rowIndex='index' :colIndex='index2' :colIndex2="index3" :style="[{width: '100%'},{height:`${list2.rowHeight*41}px`}]">
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span='4' style="height:100%;">
        <div class="config-container">
          <div class="config-container-title">
            {{activeData.name}}
          </div>
          <div style="height:100%;overflow:scroll;padding-top:56px;">
            <div v-show="activeData.type !== 10" class="config-flex">
              <div style="margin-bottom: 10px;">
                标题占位<el-input v-model="activeData.titleWidth" class="flex-list" @change="changeTitleWidth"></el-input>列
              </div>
              <div style="margin-bottom: 10px;">
                内容占位<el-input v-model="activeData.contentWidth" class="flex-list" @change="changeContentWidth"></el-input>列
              </div>
              <div style="margin-bottom: 10px;">
                控件占位<el-input v-model="activeData.rowHeight" class="flex-list" @change="changeRow"></el-input>行
              </div>
            </div>
            <div style="padding: 17px 20px;">
              <div class="config-list">
                <div class="config-title">标题 <span>最多20个字</span></div>
                <el-input v-model="activeData.title" class="flex-list" @input="changeTitle"></el-input>
              </div>
              <div v-show="activeData.type !== 10" class="config-list">
                <div class="config-title">提示文字 <span>最多20个字</span></div>
                <el-input v-model="activeData.placeholder" class="flex-list" @input="changeHolder"></el-input>
              </div>
              <div v-show="activeData.type === 6" class="config-list">
                <div class="config-title">日期格式</div>
                <el-select v-model="activeData.timeType" placeholder="请选择" @change="changeTime">
                  <el-option label="年月日" value="1"></el-option>
                  <el-option label="年月日时分秒" value="2"></el-option>
                </el-select>
              </div>
              <div v-show="activeData.type === 3||activeData.type === 4||activeData.type ===5" class="config-list">
                <div class="config-title">数据来源</div>
                <div class="flex-content" @click="choiseDataSource">{{activeData.dataSourceName}}</div>
              </div>
              <div v-show="activeData.type !== 10" class="config-list">
                <div class="config-title">验证</div>
                <el-switch v-model="activeData.required" active-text="必填" @change="changeSwitch">
                </el-switch>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-dialogDrag :visible.sync="previewVisible" title="表单预览" width="80%">
      <PreviewModal :previewData="previewData" :defaultColNum="defaultColNum" />
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="previewVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="sourceVisible" title="选择数据来源" width="40%">
      <el-form :model="form" inline label-width="80px">
        <el-form-item label="字典名称">
          <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="initDictionData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="tableRef" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection"></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px;" layout="prev, pager, next" :total="total" @current-change="initDictionData"></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="sourceVisible = false">取 消</el-button>
        <el-button class="bottom_all" type="primary" @click="dataSourceSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import { getDictionaryData } from '@/api/basedata/dictionary';
import { getFormData } from '@/api/Signed/flows';
import PreviewModal from './PreviewModal';
export default {
  props: ['processManagerId', 'editFormData'],
  components: {
    PreviewModal,
  },
  data() {
    return {
      previewVisible: false,
      sourceVisible: false,
      previewData: [],
      commonControlData: [{
        name: '单行输入框',
        id: 1
      }, {
        name: '多行输入框',
        id: 2
      }, {
        name: '单选框',
        id: 3
      }, {
        name: '多选框',
        id: 4
      }, {
        name: '下拉框',
        id: 5
      }, {
        name: '日期',
        id: 6
      }, {
        name: '附件',
        id: 7
      }, {
        name: '文本框',
        id: 8
      }, {
        name: '审批人',
        id: 11
      }],
      rowNum: 100,
      defaultColNum: 8, // 默认列
      defaultHeightNum: 1, // 默认高度
      defaultTitleWidth: 1, // 默认标题宽度
      defaultContentWidth: 3, // 默认内容宽度
      moveRow: '',
      moveCol2: '',
      moveCol: '',
      activeRow: 0,
      activeColIndex: 0,
      activeCol: 0,
      total: 0,
      formId: '',
      rowData: [],
      realRowData: [],
      activeData: {},
      form: {},
      tableData: [],
      choisedData: {},
      currentIndex: '',
      codeIndex: 1,
      moveCode: '',
    }
  },
  methods: {
    /**
     * @Description: 编辑控件库
     * @Param: 
     * @Author: wangwangwang
     */
    editSubmit() {
      this.$router.push({ name: 'controlLibrary' })
    },
    /**
     * @Description: 预览
     * @Param: 
     * @Author: wangwangwang
     */
    previewSubmit() {
      const newArry = this.rowData.filter((item) => (
        item.children.length > 0
      ));
      if (!newArry.length) {
        this.$message({
          message: '请存在数据后在进行预览！！！',
          type: 'warning'
        });
        return
      }
      this.previewData = newArry;
      this.previewVisible = true;
    },
    /**
     * @Description: 设置表单标题和内容的占位宽度
     * @Param: 
     * @Author: wangwangwang
     */
    changeTitleWidth(value) {
      if (isNaN(value)) {
        this.activeData.titleWidth = 1
        this.$message({
          message: '只能输入数字！！！',
          type: 'warning'
        });
      } else if (value * 1 === 0) {
        this.activeData.titleWidth = 1
        this.$message({
          message: '占位不能为0！！！',
          type: 'warning'
        });
      } else {
        value = value * 1;
        const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol]
        const onSelfParent = this.realRowData[this.activeRow].children
        let allWidth = 0;
        for (let i = 0; i < onSelfParent.length; i += 1) {
          if (i !== this.activeColIndex && !onSelfParent[i].isEmpty) {
            allWidth += onSelfParent[i].width
          }
        }
        allWidth = allWidth + onSelf.contentWidth + value;
        if (allWidth > this.defaultColNum) {
          this.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        } else if (allWidth === this.defaultColNum) {
          onSelf.titleWidth = value;
          onSelfParent[this.activeColIndex].width = value + onSelf.contentWidth;
          onSelfParent[onSelfParent.length - 1].width = 0;
          this.rowData = [...this.realRowData];
        } else {
          onSelf.titleWidth = value;
          onSelfParent[this.activeColIndex].width = value + onSelf.contentWidth;
          onSelfParent[onSelfParent.length - 1].width = this.defaultColNum - allWidth;
          this.rowData = [...this.realRowData];
        }
      }
    },
    changeTitle(value) {
      const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol]
      onSelf.title = value;
      this.rowData = [...this.realRowData];
    },
    changeHolder(value) {
      const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol]
      onSelf.placeholder = value;
      this.rowData = [...this.realRowData];
    },
    changeContentWidth(value) {
      if (isNaN(value)) {
        this.activeData.contentWidth = 2
        this.$message({
          message: '只能输入数字！！！',
          type: 'warning'
        });
      } else if (value * 1 === 0) {
        this.activeData.contentWidth = 2
        this.$message({
          message: '占位不能为0！！！',
          type: 'warning'
        });
      } else {
        value = value * 1
        const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol];
        const onSelfParent = this.realRowData[this.activeRow].children;
        let allWidth = 0;
        for (let i = 0; i < onSelfParent.length; i += 1) {
          if (i !== this.activeColIndex && !onSelfParent[i].isEmpty) {
            allWidth += onSelfParent[i].width
          }
        }
        allWidth = allWidth + onSelf.titleWidth + value;
        if (allWidth > this.defaultColNum) {
          this.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        } else if (allWidth === this.defaultColNum) {
          onSelf.contentWidth = value;
          onSelfParent[onSelfParent.length - 1].width = 0;
          onSelfParent[this.activeColIndex].width = value + onSelf.titleWidth;
          this.rowData = [...this.realRowData];
        } else {
          onSelf.contentWidth = value;
          onSelfParent[this.activeColIndex].width = value + onSelf.titleWidth;
          if (onSelfParent.length > this.activeColIndex + 1) { // 存在最后一个数据的时候将最后一个数据设置宽度
            onSelfParent[onSelfParent.length - 1].width = this.defaultColNum - allWidth;
          }
          this.rowData = [...this.realRowData];
        }
      }
    },
    /**
     * @Description: 改变行数
     * @Param: 
     * @Author: wangwangwang
     */
    changeRow(value) {
      if (isNaN(value)) {
        this.activeData.rowHeight = this.defaultHeightNum;
        this.$message({
          message: '只能输入数字！！！',
          type: 'warning'
        });
      } else if (value * 1 === 0) {
        this.activeData.rowHeight = this.defaultHeightNum;
        this.$message({
          message: '占位不能为0！！！',
          type: 'warning'
        });
      } else {
        value = value * 1
        const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol];
        const onSelfParent = this.realRowData[this.activeRow].children[this.activeColIndex].children;
        let allHeight = 0;
        for (let i = 0; i < onSelfParent.length; i += 1) {
          if (i !== this.activeCol) {
            allHeight += onSelfParent[i].rowHeight
          }
        }
        allHeight = allHeight + value;
        this.realRowData[this.activeRow].children[this.activeColIndex].height = allHeight;
        onSelf.rowHeight = value;
        this.formartRow()
      }
    },
    /**
     * @Description: 设置行后格式化其他列的行
     * @Param: 
     * @Author: wangwangwang
     */
    formartRow() {
      /**
       * @Description: 设置最外层的table-list的高度
       * @Param: 
       * @Author: wangwangwang
       */
      const firstLayer = this.realRowData[this.activeRow].children;
      let maxHeight = 0;
      for (let i = 0; i < firstLayer.length; i += 1) {
        if ((firstLayer[i].height > maxHeight)) {
          maxHeight = firstLayer[i].height
        }
      }
      this.realRowData[this.activeRow].height = maxHeight;
      /**
       * @Description: 格式化table-list
       * @Param: 
       * @Author: wangwangwang
       */
      for (let i = 0; i < firstLayer.length; i += 1) {
        if (maxHeight > firstLayer[i].height) {
          firstLayer[i].height = maxHeight;
          let allHeight = 0;
          for (let j = 0; j < firstLayer[i].children.length; j += 1) {
            allHeight += firstLayer[i].children[j].rowHeight
          }
          allHeight = maxHeight - allHeight;
          const newArry = []
          for (let k = 0; k < allHeight; k += 1) {
            const data = {
              titleWidth: this.defaultTitleWidth,
              contentWidth: this.defaultContentWidth,
              rowHeight: this.defaultHeightNum,
              id: firstLayer[i].children.length + k + 1,
            }
            newArry.push(data)
          }
          firstLayer[i].children = firstLayer[i].children.concat(newArry);
        } else if (maxHeight < firstLayer[i].height) {
          console.log('减少')
        }
      }
    },
    /**
     * @Description: 计算行的总长度
     * @Param: 
     * @Author: wangwangwang
     */
    calWidth(children) {
      let allWidth = 0;
      for (let i = 0; i < children.length; i += 1) {
        allWidth += children[i].width * 1
      }
      return allWidth;
    },
    /**
     * @Description: 点击表单进行配置
     * @Param: 
     * @Author: wangwangwang
     */
    setActive(index1, index2, index3, data) {
      this.activeRow = index1;
      this.activeColIndex = index2;
      this.activeCol = index3;
      this.activeData = { ...data };
    },
    /**
     * @Description: 删除列数据
     * @Param: 
     * @Author: wangwangwang
     */
    deleteList(e, rowIndex, colIndex, colIndex2) {
      e.stopPropagation()
      let copyData = this.rowData[rowIndex].children[colIndex].children[colIndex2];
      const data = {
        contentWidth: copyData.contentWidth,
        rowHeight: copyData.rowHeight,
        titleWidth: copyData.titleWidth,
      }
      for (let i = 0; i < this.rowData.length; i += 1) {
        if (i === rowIndex) {
          for (let j = 0; j < this.rowData[i].children.length; j += 1) {
            if (j === colIndex) {
              for (let k = 0; k < this.rowData[i].children[j].children.length; k += 1) {
                if (k === colIndex2) {
                  this.rowData[i].children[j].children[k] = data
                }
              }
            }
          }
        }
      }
      this.activeData = {};
      this.activeRow = '';
      this.activeColIndex = '';
      this.activeCol = '';
    },
    initFormmatRow() {
      this.rowData = [];
      this.realRowData = [];
      for (let i = 0; i < this.rowNum; i += 1) {
        let data = {};
        if (i === 0) { // 构造标题
          data = {
            children: [{
              children: [{
                code: "code0",
                contentWidth: this.defaultColNum,
                name: "流程标题",
                placeholder: "请输入",
                rowHeight: 1,
                titleWidth: 0,
                type: 10,
              }],
              height: 1,
              width: this.defaultColNum,
            }, {
              children: [{
                contentWidth: 3,
                isEmpty: true,
                rowHeight: 1,
                titleWidth: 1,
              }],
              height: 1,
              isEmpty: true,
              width: 0,
            }],
            height: 1,
            id: i,
          }
          this.activeData = {
            code: "code0",
            contentWidth: this.defaultColNum,
            name: "流程标题",
            placeholder: "请输入",
            rowHeight: 1,
            titleWidth: 0,
            type: 10,
          }
        } else {
          data = {
            children: [],
            height: this.defaultHeightNum,
            id: i,
          }
        }
        this.rowData.push(data);
        this.realRowData.push(data);
      }
    },
    handleChange() {
      this.activeData = {};
      this.initFormmatRow();
    },
    /**
     * @Description: 获取数据来源
     * @Param: 
     * @Author: wangwangwang
     */
    choiseDataSource() {
      this.sourceVisible = true;
      this.page = 1;
      this.form.name = '';
      this.initDictionData();
      this.choisedData = [];
    },
    dataSourceSubmit() {
      if (this.choisedData.length !== 1) {
        this.$message({
          type: 'warning',
          message: '只能选择一条数据来源！！！'
        })
        return
      }
      const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol];
      onSelf.dataSourceName = this.choisedData[0].name;
      onSelf.dataSourceCode = this.choisedData[0].code;
      this.rowData = [...this.realRowData];
      this.sourceVisible = false;
      this.activeData.dataSourceName = this.choisedData[0].name;
    },
    initDictionData(page) {
      let params = {
        ...this.form,
        page: page || this.page,
        pageSize: 10
      };
      getDictionaryData(params).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.totalRows;
      });
    },
    handleSelectionChange(data) {
      if(data.length > 1){
        this.$refs.tableRef.clearSelection()
        this.$refs.tableRef.toggleRowSelection(data.pop())
      } else{
        this.choisedData = data;
      }  
    },
    changeTime(value) {
      const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol];
      onSelf.timeType = value;
    },
    changeSwitch (value) {
      const onSelf = this.realRowData[this.activeRow].children[this.activeColIndex].children[this.activeCol];
      onSelf.required = value;
    },
    initData() {
      getFormData({ processManagerId: this.processManagerId }).then(res => {
        if (res.code === 1001) {
          /**
           * @Description: 如果存在data表示为编辑数据
           * @Param: 
           * @Author: wangwangwang
           */
          if (res.data) {
            this.formId = res.data.id;
            const formStructureData = JSON.parse(res.data.formStructureData);
            this.rowData = [];
            this.realRowData = [];
            for (let i = 0; i < this.rowNum; i += 1) {
              if (formStructureData[i]) {
                const data = formStructureData[i];
                this.rowData.push(data);
                this.realRowData.push(data);
              } else {
                const data = {
                  children: [],
                  height: this.defaultHeightNum,
                  id: i+formStructureData.length,
                }
                this.rowData.push(data);
                this.realRowData.push(data);
              }
            }
            /**
             * @Description: 遍历formStructureData，获取最新的code
             * @Param: 
             * @Author: wangwangwang
             */
            const newArry = [];
            formStructureData.forEach((item) => {
              const { children } = item;
              children.forEach((item2) => {
                const { children } = item2;
                children.forEach((item3) => {
                  if (!item3.isEmpty) {
                    newArry.push(item3)
                  }
                })
              })
            });
            this.codeIndex = newArry[newArry.length - 1].code?.split('code')[1] * 1 + 1 || 10;
          } else {
            this.initFormmatRow(); // 不存在data则将表格进行初始化。
          }
        }
      });
    },
    addElement (event) {
      const self = this;
      const { realRowData, currentIndex, commonControlData } = self;
      /**
       * @Description: 拖动到Row
       * @Param: 
       * @Author: wangwangwang
       */
      if (event.target.className === 'table-list') {
        const currentRow = event.target.attributes[1].value * 1;
        const { children } = realRowData[currentRow];
        const allWidth = self.calWidth(children)
        if (self.defaultColNum < (allWidth + self.defaultTitleWidth + self.defaultContentWidth)) {
          self.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        }
        const data = [{
          children: [{
            name: commonControlData[currentIndex].name,
            title: '标题',
            code: `code${self.codeIndex}`,
            placeholder: '请输入',
            type: commonControlData[currentIndex].id,
            titleWidth: self.defaultTitleWidth,
            contentWidth: self.defaultContentWidth,
            rowHeight: self.defaultHeightNum,
            required: false,
          }],
          width: self.defaultTitleWidth + self.defaultContentWidth,
          height: self.defaultHeightNum,
        }, {
          children: [{
            titleWidth: self.defaultTitleWidth,
            contentWidth: self.defaultContentWidth,
            rowHeight: self.defaultHeightNum,
            isEmpty: true,
          }],
          isEmpty: true,
          height: self.defaultHeightNum,
          width: self.defaultColNum - (allWidth + self.defaultTitleWidth + self.defaultContentWidth),
        }]
        for (let i = 0; i < self.realRowData.length; i += 1) {
          if (i === currentRow) {
            self.realRowData[i].children = self.realRowData[i].children.concat(data);
          }
        }
        self.rowData = Object.assign([], self.realRowData);
        self.activeData = self.rowData[currentRow].children[0].children[0];
        self.activeRow = currentRow;
        self.activeColIndex = 0;
        self.activeCol = 0;
        self.codeIndex += 1;
        /**
         * @Description: 拖动到Col
         * @Param: 
         * @Author: wangwangwang
         */
      } else if (event.target.className === 'table-col-list') {
        const rowIndex = event.target.attributes[1].value * 1;
        const colIndex = event.target.attributes[2].value * 1;
        const colIndex2 = event.target.attributes[3].value * 1;
        const parentCol = realRowData[rowIndex].children[colIndex];
        if (parentCol.width < (self.defaultTitleWidth + self.defaultContentWidth)) {
          self.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        } else if (parentCol.width === (self.defaultTitleWidth + self.defaultContentWidth)) {
          const data = {
            name: commonControlData[currentIndex].name,
            title: '标题',
            placeholder: '请输入',
            code: `code${self.codeIndex}`,
            type: commonControlData[currentIndex].id,
            titleWidth: self.defaultTitleWidth,
            contentWidth: self.defaultContentWidth,
            rowHeight: self.defaultHeightNum,
            required: false,
          }
          parentCol.children[colIndex2] = data;
          delete parentCol.isEmpty;
          self.rowData = Object.assign([], realRowData);
        } else {
          const copyData = Object.assign([], realRowData[rowIndex].children[realRowData[rowIndex].children.length - 1]);
          const data = {
            name: commonControlData[currentIndex].name,
            title: '标题',
            placeholder: '请输入',
            code: `code${self.codeIndex}`,
            type: commonControlData[currentIndex].id,
            titleWidth: self.defaultTitleWidth,
            contentWidth: self.defaultContentWidth,
            rowHeight: self.defaultHeightNum,
            required: false,
          }
          parentCol.children[colIndex2] = data;
          /**
           * @Description: 同时修改本列和最后一列的宽度
           * @Param: 
           * @Author: wangwangwang
           */
          let maxWidth = 0
          for (let i = 0; i < parentCol.children.length; i += 1) {
            const sumWidth = parentCol.children[i].titleWidth + parentCol.children[i].contentWidth;
            maxWidth = sumWidth > maxWidth ? sumWidth : maxWidth
          }
          parentCol.width = maxWidth;
          parentCol.isEmpty = false;
          let minWidth = self.defaultColNum;
          for (let i = 0; i < realRowData[rowIndex].children.length; i += 1) {
            minWidth -= realRowData[rowIndex].children[i].width
          }
          const newArry = []
          for (let i = 0; i < copyData.children.length; i += 1) {
            const data = {
              titleWidth: self.defaultTitleWidth,
              contentWidth: self.defaultContentWidth,
              rowHeight: self.defaultHeightNum,
              id: i,
            }
            newArry.push(data)
          }
          const newData = {
            width: minWidth,
            height: copyData.height,
            isEmpty: true,
            children: newArry
          }
          realRowData[rowIndex].children.push(newData);
          self.rowData = Object.assign([], realRowData);
        }
        self.activeData = self.rowData[rowIndex].children[colIndex].children[colIndex2];
        self.activeRow = rowIndex;
        self.activeColIndex = colIndex;
        self.activeCol = colIndex2;
        self.codeIndex += 1;
      }
    },
    moveElement (event) {
      const self = this;
      const { realRowData, moveCode, rowData } = self;
      if (moveCode === 'code0') {
        this.$message.warning('标题不能移动');
        return
      }
      let moveData = {}
      for (let i = 0; i < rowData.length; i+=1) {
        for (let j = 0; j < rowData[i]?.children.length;j+=1) {
          for (let k = 0; k < rowData[i]?.children[j]?.children.length; k+=1) {
            if (rowData[i].children[j].children[k].code === moveCode) {
              moveData = JSON.parse(JSON.stringify(rowData[i].children[j].children[k]));
              const data = {
                contentWidth: moveData.contentWidth,
                rowHeight: moveData.rowHeight,
                titleWidth: moveData.titleWidth,
              }
              rowData[i].children[j].children[k] = data;
              realRowData[i].children[j].children[k] = data;
              break
            }
          }
        }
      }
      if (!moveData.code) return
      /**
       * @Description: 拖动到Row
       * @Param: 
       * @Author: wangwangwang
       */
      if (event.target.className === 'table-list') {
        const currentRow = event.target.attributes[1].value * 1;
        const { children } = realRowData[currentRow];
        const allWidth = self.calWidth(children)
        if (self.defaultColNum < (allWidth + moveData.titleWidth + moveData.contentWidth)) {
          self.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        }
        const data = [{
          children: [moveData],
          width: self.defaultTitleWidth + self.defaultContentWidth,
          height: self.defaultHeightNum,
        }, {
          children: [{
            titleWidth: self.defaultTitleWidth,
            contentWidth: self.defaultContentWidth,
            rowHeight: self.defaultHeightNum,
            isEmpty: true,
          }],
          isEmpty: true,
          height: self.defaultHeightNum,
          width: self.defaultColNum - (allWidth + moveData.titleWidth + moveData.contentWidth),
        }]
        for (let i = 0; i < self.realRowData.length; i += 1) {
          if (i === currentRow) {
            self.realRowData[i].children = self.realRowData[i].children.concat(data);
          }
        }
        self.rowData = Object.assign([], self.realRowData);
        self.activeData = self.rowData[currentRow].children[0].children[0];
        self.activeRow = currentRow;
        self.activeColIndex = 0;
        self.activeCol = 0;
        /**
         * @Description: 拖动到Col
         * @Param: 
         * @Author: wangwangwang
         */
      } else if (event.target.className === 'table-col-list') {
        const rowIndex = event.target.attributes[1].value * 1;
        const colIndex = event.target.attributes[2].value * 1;
        const colIndex2 = event.target.attributes[3].value * 1;
        const parentCol = realRowData[rowIndex].children[colIndex];
        if (parentCol.width < (moveData.titleWidth + moveData.contentWidth)) {
          self.$message({
            message: '占位的列数不能大于总列数！！！',
            type: 'warning'
          });
          return
        } else if (parentCol.width === (moveData.titleWidth + moveData.contentWidth)) {
          const data = moveData
          parentCol.children[colIndex2] = data;
          delete parentCol.isEmpty;
          self.rowData = Object.assign([], realRowData);
        } else {
          const copyData = Object.assign([], realRowData[rowIndex].children[realRowData[rowIndex].children.length - 1]);
          parentCol.children[colIndex2] = moveData;
          /**
           * @Description: 同时修改本列和最后一列的宽度
           * @Param: 
           * @Author: wangwangwang
           */
          let maxWidth = 0
          for (let i = 0; i < parentCol.children.length; i += 1) {
            const sumWidth = parentCol.children[i].titleWidth + parentCol.children[i].contentWidth;
            maxWidth = sumWidth > maxWidth ? sumWidth : maxWidth
          }
          parentCol.width = maxWidth;
          parentCol.isEmpty = false;
          let minWidth = self.defaultColNum;
          for (let i = 0; i < realRowData[rowIndex].children.length; i += 1) {
            minWidth -= realRowData[rowIndex].children[i].width
          }
          const newArry = []
          for (let i = 0; i < copyData.children.length; i += 1) {
            const data = {
              titleWidth: self.defaultTitleWidth,
              contentWidth: self.defaultContentWidth,
              rowHeight: self.defaultHeightNum,
              id: i,
            }
            newArry.push(data)
          }
          const newData = {
            width: minWidth,
            height: copyData.height,
            isEmpty: true,
            children: newArry
          }
          realRowData[rowIndex].children.push(newData);
          self.rowData = Object.assign([], realRowData);
        }
        self.activeData = self.rowData[rowIndex].children[colIndex].children[colIndex2];
        self.activeRow = rowIndex;
        self.activeColIndex = colIndex;
        self.activeCol = colIndex2;
      }
    },
  },
  mounted() {
    this.initData();
    this.initDictionData();
    const self = this;
    /**
     * @Description: 获取被拖拽的节点
     * @Param: 
     * @Author: wangwangwang
     */
    document.querySelector(".from-config").addEventListener("dragstart", function (event) {
      if (event.target.attributes[1].name === 'index') { // 新增数据
        self.currentIndex = event.target.attributes[1].value * 1;
        self.moveCode = '';
      } else { // 已有数据进行拖动
        for (let i = 0;i < event.target.attributes.length; i+=1) {
          if (event.target.attributes[i].name === 'code') {
            self.moveCode = event.target.attributes[i].value;
            break
          }
        }
        self.currentIndex = '';
      }
    });
    /**
     * @Description: 拖拽进行中的判断
     * @Param: 
     * @Author: wangwangwang
     */
    document.querySelector(".from-config").addEventListener("dragover", function (event) {
      event.preventDefault();
    });
    /**
     * @Description: 设置拖拽
     * @Param: 
     * @Author: wangwangwang
     */
    document.querySelector(".from-config").addEventListener("dragenter", function (event) {
      event.preventDefault();
      /**
       * @Description: 当节点为tableList的时候判断是否存在内容，存在内容就就进行如何操作，不存在内容就将其特殊处理
       * @Param: 
       * @Author: wangwangwang
       */
      if (event.target.className === 'table-list') {
        self.moveRow = event.target.attributes[1].value * 1;
        self.moveCol = '';
        self.moveCol2 = '';
      } else if (event.target.className === 'table-col-list') {
        self.moveRow = event.target.attributes[1].value * 1;
        self.moveCol = event.target.attributes[2].value * 1;
        self.moveCol2 = event.target.attributes[3].value * 1;
      } else {
        self.moveRow = '';
        self.moveCol = '';
        self.moveCol2 = '';
      }
    });
    /**
     * @Description: 结束拖拽
     * @Param: 
     * @Author: wangwangwang
     */
    document.querySelector(".from-config").addEventListener("drop", function (event) {
      event.preventDefault();
      const { currentIndex } = self;
      self.moveRow = ''
      self.moveCol = ''
      self.moveCol2 = '';
      window.setTimeout(() => {
        if (currentIndex || currentIndex===0) { // 新增数据
          self.addElement(event);
        } else { // 拖动数据
          self.moveElement(event);
        }
      }, 100)
    });
  }
}
</script>
<style lang="scss">
.table-list-container {
  .sortable-chosen.control-type-list {
    display: none !important;
  }
}
</style>
<style lang="scss" scoped>
.control-lib {
  position: relative;
  height: 100%;
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  .control-title {
    background: rgba(245, 247, 250, 1);
    border-bottom: 1px solid rgba(225, 229, 237, 1);
    height: 56px;
    line-height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .control-type-container {
    height: 100%;
    overflow: scroll;
  }
  .lib-type-list {
    .list-tile {
      background: rgba(250, 252, 255, 1);
      padding: 15px 10px;
      margin-bottom: 14px;
    }
    .control-type-list {
      background: rgba(245, 247, 250, 1);
      border-radius: 4px;
      margin: 0 25px 8px;
      padding: 8px;
      color: #4b4c4d;
      font-size: 12px;
    }
  }
}
.table-container {
  position: relative;
  height: 100%;
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  .table-title {
    background: rgba(245, 247, 250, 1);
    padding: 0 20px;
    border-bottom: 1px solid rgba(225, 229, 237, 1);
    height: 56px;
    line-height: 56px;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
    left: 0;
  }
  .table-main {
    position: relative;
    height: 100%;
    z-index: 1;
    overflow: scroll;
    .table-backgroud {
      padding-top: 56px;
      height: 4100px;
      background: #f9fcff;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      .backgroud-list {
        border-bottom: 1px dashed #e1e5ed;
        .backgroud-col {
          height: 40px;
          border-right: 1px dashed #e1e5ed;
        }
        .backgroud-col:last-of-type {
          border: none;
        }
      }
      .backgroud-list:last-of-type {
        border: none;
      }
    }
    .table-list-container {
      padding-top: 56px;
      height: 4100px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      .hover-row {
        border-top: 4px solid $bg_color;
      }
      .table-list {
        width: 100%;
        .hover-col {
          border-top: 4px solid $bg_color;
        }
        .list-title {
          height: 40px;
          line-height: 40px;
          float: left;
          padding-right: 10px;
          text-align: right;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 5px;
        }
        .list-content {
          border-radius: 4px;
          background: #fff;
          position: relative;
          float: left;
          border: 1px solid #e1e5ed;
          color: #969799;
          padding-left: 10px;
          text-align: center;
          padding-top: 8px;
        }
        .col-list {
          float: left;
          position: relative;
          .table-col-list {
            position: relative;
            .el-icon-error {
              position: absolute;
              top: -5px;
              right: -5px;
              cursor: pointer;
              color: #4b4c4d;
              display: none;
            }
          }
          .is-active {
            border: 1px solid $bg_color;
            box-sizing: border-box;
            .el-icon-error {
              position: absolute;
              top: -5px;
              right: -5px;
              cursor: pointer;
              color: #4b4c4d;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
.config-container {
  position: relative;
  height: 100%;
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  .config-container-title {
    background: rgba(245, 247, 250, 1);
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid rgba(225, 229, 237, 1);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .config-flex {
    position: relative;
    z-index: 1;
    padding: 17px 20px;
    border-bottom: 1px solid #f5f7fa;
    .flex-list {
      width: 40%;
      margin: 0 5px;
    }
  }
}
.config-list {
  margin: 8px 0;
  .config-title {
    font-size: 14px;
    margin-bottom: 5px;
    span {
      font-size: 12px;
      color: #969799;
    }
  }
  .flex-content {
    height: 36px;
    line-height: 36px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    color: #4b4c4d;
    padding: 0 15px;
  }
}
.from-config {
  height: 100%;
  display: flex;
}
</style>
